<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="handleQuery"
      @clear="clear"
    />
    <div class="doumee_table_header">
      <el-button
        v-if="meta.indexOf('addShare') > -1"
        v-preventReClick
        type="primary"
        @click="handleIncreased"
      >{{ translate("xinjian") }}</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="translate('taskName')"
        prop="name"
        min-width="160"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span class="primaryColor pointer" @click="handleDetail(scope.row)">{{
            scope.row.name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('roleConsumType')"
        prop="typeInfo"
        show-overflow-tooltip
        min-width="160"
      />
      <el-table-column
        align="center"
        :label="translate('yjblUnit')"
        prop="ratio"
        min-width="100"
      />
      <el-table-column
        align="center"
        :label="translate('dbqdje')"
        prop="beginMoney"
        min-width="110"
      />
      <el-table-column
        align="center"
        :label="translate('rwms')"
        min-width="100"
      >
        <template v-slot="scope">
          <span v-if="scope.row.shareUsers == '0'">{{
            translate("zdry")
          }}</span>
          <span v-if="scope.row.shareUsers == '1'">{{
            translate("qbkf")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('indate')"
        prop="beginTime"
        min-width="180"
      >
        <template v-slot="scope">
          <div>
            <div v-if="scope.row.beginTime">
              {{ translate("rise") }}:{{ scope.row.beginTime }}
            </div>
            <div v-if="scope.row.endTime">
              {{ translate("stop") }}:{{ scope.row.endTime }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('fybs')"
        prop="orderNum"
        min-width="80"
      />
      <el-table-column
        align="center"
        :label="translate('sort')"
        prop="sortNum"
        min-width="80"
      />
      <el-table-column
        align="center"
        :label="translate('createTime')"
        prop="createTime"
        min-width="160"
      />
      <el-table-column
        align="center"
        :label="translate('rwzt')"
        fixed="right"
        width="80"
      >
        <template v-slot="scope">
          <span v-if="scope.row.status == '0'">{{ translate("dfb") }}</span>
          <span v-if="scope.row.status == '1'">{{ translate("qy") }}</span>
          <span v-if="scope.row.status == '2'">{{ translate("jy") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('handle')"
        width="200"
        fixed="right"
      >
        <template v-slot="scope">
          <div class="flex-cc">
            <el-button
              v-if="
                scope.row.status == '0' &&
                  meta.indexOf('changeShareStatus') > -1
              "
              v-preventReClick
              type="text"
              @click="changeStatus(scope.row, 1)"
            >{{ translate("fb") }}</el-button>
            <el-button
              v-if="
                scope.row.status == '1' &&
                  meta.indexOf('changeShareStatus') > -1
              "
              v-preventReClick
              type="text"
              @click="changeStatus(scope.row, 2)"
            >{{ translate("jy") }}</el-button>
            <el-button
              v-if="
                scope.row.status == '2' &&
                  meta.indexOf('changeShareStatus') > -1
              "
              v-preventReClick
              type="text"
              @click="changeStatus(scope.row, 1)"
            >{{ translate("qy") }}</el-button>
            <el-button
              v-preventReClick
              type="text"
              @click="handlePeople(scope.row)"
            >{{ translate("ry") }}</el-button>
            <!-- <el-button v-if="scope.row.status != '0'" @click="handleCopy(scope.row)" v-preventReClick type="text">{{translate('copy')}}</el-button> -->
            <el-button
              v-if="scope.row.status == '0' && meta.indexOf('addShare') > -1"
              v-preventReClick
              type="text"
              @click="handleEdit(scope.row)"
            >{{ translate("edit") }}</el-button>
            <el-button
              v-if="
                scope.row.status == '0' && meta.indexOf('deletedShareTask') > -1
              "
              v-preventReClick
              class="danger"
              type="text"
              @click="handleDel(scope.row)"
            >{{ translate("del") }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="currentPageChange"
      @SizeChange="pageSizeChange"
    />
  </div>
</template>

<script>
import Paginations from '@/components/paginations'
import { queryFormConfig } from './config'

import { ShareList, changeShareStatus, delShare } from '@/api'
export default {
  components: {
    Paginations
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      filters: {},
      queryFormConfig,
      pagination: {
        page: 1,
        rows: 10
      },
      list: [],
      totalCount: 0,
      listLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      const { filters, pagination } = this
      this.listLoading = true
      ShareList({ param: filters, pagination }).then(res => {
        this.listLoading = false
        this.list = res.recordList || []
        this.totalCount = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    changeStatus(item, status) {
      const param = {
        shareId: item.id,
        status
      }
      const message = status === 1 ? this.translate('fbqycs') : this.translate('jyScs')
      changeShareStatus({ param }).then(res => {
        if (res.errorCode !== '000000') return
        this.$message.success(message)
        this.getList()
      })
    },
    handleQuery() {
      this.pagination.page = 1
      this.getList()
    },
    handleDel(item) {
      this.$confirm(this.translate('czzjscgfxrw'), this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel'),
        type: 'warning'
      })
        .then(() => {
          delShare({
            param: {
              shareId: item.id
            }
          }).then(res => {
            if (res.errorCode !== '000000') return
            this.$message.success(this.translate('delScs'))
            this.getList()
          })
        })
    },
    handleEdit(item) {
      const { id } = item
      this.$router.push({ name: 'TaskAdd', query: { id }})
    },
    handleDetail(item) {
      this.$router.push({ name: 'TaskDetail', query: { id: item.id }})
    },
    handlePeople(item) {
      this.$router.push({
        name: 'SharePeople', query: {
          id: item.id,
          shareUsers: item.shareUsers
        }
      })
    },
    handleIncreased() {
      this.$router.push({ name: 'TaskAdd' })
    },
    clear() {
      this.filters = {}
      this.handleQuery()
    },
    currentPageChange(val) {
      this.pagination.page = val
      this.getList()
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList()
    }
  }
}
</script>

<style>
</style>
